<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background-color: white;">
    <canvas width="62" height="150" id="dripCanvas"></canvas>
    <script src="asset/drip.js"></script>
    <script>

        var drip = new Drip("#dripCanvas" ,30);
        var id;
        var distance = 0,step =1;
        function tick() {
            //( distance > 90 || distance < 0) && (step *= -1);
            distance += step;
            id = requestAnimationFrame(tick);
            drip.setDistance(distance);
            if (distance > 90) {
                drip.toLoading();
                cancelAnimationFrame(id);
            }

          
        }

        tick();
    </script>

    <a href="https://github.com/AlloyTeam/AlloyTouch/blob/master/example/drip_refresh/index.html" target="_blank" style="position: absolute; right: 0; top: 0;">
        <img src="//alloyteam.github.io/github.png" alt="" />
    </a>
</body>
</html>